// 分类导航隐藏模块显示
const myUl = document.querySelector(".xtx_head .xtx_mainNav .father_ul")
// 鼠标点击
myUl.addEventListener("click", function (e) {
  if (e.target.tagName === 'A') {
    const myActive = document.querySelector(".xtx_head .xtx_mainNav li .active")
    if (myActive) {
      myActive.classList.remove('active')
    }
    e.target.classList.add('active')
  }
})
// 鼠标经过
myUl.addEventListener("mouseover", function (e) {
  if (e.target.tagName === 'A') {
    const myOpen = document.querySelector('.xtx_head .xtx_mainNav li .open')
    if (myOpen) {
      myOpen.classList.remove("open")
    }
    e.target.nextElementSibling.classList.add("open")
  }
})
// 鼠标移出
myUl.addEventListener("mouseleave", function (e) {
  const myOpen = document.querySelector('.xtx_head .xtx_mainNav li .open')
  if (myOpen) {
    myOpen.classList.remove("open")
  }
})
// 分类导航隐藏模块结束


// 鼠标经过小图片变大图片
// 五个小图片
const small = document.querySelector('.img-s')
const middle = document.querySelector('.img-b')
const large = document.querySelector('.large')
const layerBlack = middle.children[1]
// 1. 鼠标经过小图片中等图片跟随变化
// 1.1 利用事件委托给小图片添加鼠标经过事件  mouseover
small.addEventListener('mouseover', function (e) {
  if (e.target.tagName === 'IMG') {
    // console.log(111)
    // 1.2 把当前的小图片地址给中图片
    console.log(e.target.src)
    // console.log(middle.children[0])
    middle.children[0].src = e.target.src
  }
})
// 2. 鼠标经过/离开中盒子，大盒子显示和隐藏
// 2.1 鼠标经过时显示大盒子，显示遮罩盒子，修改大盒子的图片
let timerId = null
middle.addEventListener('mouseenter', function () {
  large.style.display = 'block'
  large.style.backgroundImage = `url(${middle.children[0].src})`
  layerBlack.style.display = 'block'
  //关闭定时器
  clearTimeout(timerId)
})
// 2.2 鼠标离开时，隐藏大盒子，添加定时器，隐藏遮罩盒子
middle.addEventListener('mouseleave', function () {
  timerId = setTimeout(function () {
    large.style.display = 'none'
  }, 200)
  layerBlack.style.display = 'none'
})
// 3. 黑色遮罩盒子跟随鼠标移动
// 3.1 给中盒子添加鼠标移动事件 mousemove
middle.addEventListener('mousemove', function (e) {
  // 3.2 把当前鼠标在盒子内的坐标给黑色遮罩盒子
  // console.log(e.offsetX, e.offsetY)
  let x = e.offsetX - layerBlack.offsetWidth / 2
  let y = e.offsetY - layerBlack.offsetHeight / 2

  // 3.3 限定遮罩盒子在中盒子内移动
  const maxX = middle.offsetWidth - layerBlack.offsetWidth
  const maxY = middle.offsetHeight - layerBlack.offsetHeight
  x = x < 0 ? 0 : x
  x = x > maxX ? maxX : x
  y = y < 0 ? 0 : y
  y = y > maxY ? maxY : y

  layerBlack.style.top = y + 'px'  // 千万不要忘记加px
  layerBlack.style.left = x + 'px'  // 千万不要忘记加px

  // 4. 大盒子图片跟随移动 存在2倍的关系
  large.style.backgroundPosition = `${-2 * x}px ${-2 * y}px`
})
// 鼠标经过图片变大结束



// 规格模块点击添加边框
const color = document.querySelector('#color')
// 点击事件
color.addEventListener('click', function (e) {
  // 如果点击的是IMG
  if (e.target.tagName === 'IMG') {
    // 检测是否有这个类名    //没有就添加 
    if (this.querySelector('.borColor') === null) return e.target.classList.add('borColor')
    // 这个如果有 就删除 给当前点击的添加
    this.querySelector('.borColor').classList.remove('borColor')
    e.target.classList.add('borColor')

  }
})
// 规格模块添加边框结束



// 点击购物车增减模块开始
const myFu = document.querySelector('.negative')
const myZheng = document.querySelector('.correct')
const myInp = document.querySelector('.aaa')
let i = 1
// 增加
myZheng.addEventListener('click', function () {
  console.log(1111)
  i++;
  console.log(i)
  myInp.value = `${i}`;
  // console.log(1)
})
// // 减少
myFu.addEventListener('click', function () {
  //     // 判断
  if (myInp.value >= 2) {
    i--
    myInp.value = `${i}`
  }
  // console.log(1)
})
// 点击购物车增减模块结束


// 点击加入购物车 购物车变化
const myI = document.querySelector('.icon-a-icon-shopcar i')
const myA = document.querySelector('.purchase a')
let j = 0
myA.addEventListener('click', function () {
  j++
  myI.innerHTML = `${j}`
})

// 点击加入购物车 购物车变化结束
// table切换
let arrA = document.querySelectorAll('.tab-head a')
let arrTab = document.querySelectorAll('.tab-pane')
arrA[0].addEventListener('click', function () {
  arrTab[0].style.display = 'block'
  arrTab[1].style.display = 'none'

})
arrA[1].addEventListener('click', function () {
  arrTab[1].style.display = 'block'
  arrTab[0].style.display = 'none'
  // 显示评论
  document.querySelector('.tabs').style.display = 'block'

})


// 翻页点击添加边框
const myPage = document.querySelector('.goodss-page').addEventListener('click', function (e) {
  if (e.target.tagName === 'A') {
    if (this.querySelector('.active') === null) return e.target.classList.add('active')
    this.querySelector('.active').classList.remove('active')
    e.target.classList.add('active')
  }
})

// 轮播图
// 数据
// 第一页
const obj = [
    {
      img: 'https://yanxuan-item.nosdn.127.net/fc266553a5b00280ab835e83a660ef14.jpg',
      name: '智能温控细嘴流速刚...',
      price: '¥389.00',
    },
    {
      img: 'https://yanxuan-item.nosdn.127.net/d5b7af02c7a2cf3966385d6565a2501d.png',
      name: '手工吹制更厚实白酒...',
      price: '￥27.50'
    },
    {
      img: 'https://yanxuan-item.nosdn.127.net/a4cd3263546e2d384fd549cda9a0761e.png',
      name: '男士头层牛皮软底豆...',
      price: '￥229.00'
    },
    {
      img: 'https://yanxuan-item.nosdn.127.net/8e21c794dfd3a4e8573273ddae50bce2.jpg',
      name: '深船型两带式可外出...',
      price: '￥108.00'
    }
]
// 第二页
const obj1 = [
  {
    img: 'https://yanxuan-item.nosdn.127.net/8e21c794dfd3a4e8573273ddae50bce2.jpg',
    name: '与众不同的口感汝瓷...',
    price: '¥109.00',
  },
  {
    img: 'https://yanxuan-item.nosdn.127.net/43261ae2406e3d620deb42e32c7a54ed.png',
    name: '手工吹制更厚实白酒...',
    price: '￥99.50'
  },
  {
    img: 'https://yanxuan-item.nosdn.127.net/f5c2bd141d6640123532410bea6aecc2.png',
    name: '男士头层牛皮软底豆...',
    price: '￥245.00'
  },
  {
    img: 'https://yanxuan-item.nosdn.127.net/8e21c794dfd3a4e8573273ddae50bce2.jpg',
    name: '深船型两带式可外出穿...',
    price: '￥179.00'
  }
]
// 第三页
const obj2 = [
  {
    img: 'https://yanxuan-item.nosdn.127.net/21d2e9b754487aa3030ce105493a9473.jpg',
    name: '加绒加厚，儿童保暖...',
    price: '¥199.00',
  },
  {
    img: 'https://yanxuan-item.nosdn.127.net/95466ac4e510c1ea4bceed80e5462e8f.png',
    name: '子安推荐女式半透明...',
    price: '￥349.50'
  },
  {
    img: 'https://yanxuan-item.nosdn.127.net/1661541f80bc9776e64125b7d586c9e6.jpg',
    name: '毛茸茸暖意，儿童羊...',
    price: '￥99.00'
  },
  {
    img: 'https://yanxuan-item.nosdn.127.net/5be7e8d6177ef0d2755a5d8887e1e475.png',
    name: '温暖拥抱新生，婴童...',
    price: '￥129.00'
  }
]
// 第四页
const obj3 = [
  {
    img: 'https://yanxuan-item.nosdn.127.net/5c2abad66d86250b6c85c74ffd0ecc2d.png',
    name: '玩趣彩虹四季拖鞋2.0',
    price: '¥21.00',
  },
  {
    img: 'https://yanxuan-item.nosdn.127.net/4605351c7b359f53d1fe4fe39a8a1999.png',
    name: '男式休闲百搭板鞋',
    price: '￥299.00'
  },
  {
    img: 'https://yanxuan-item.nosdn.127.net/27199cc003c5237eb72d235c2281482d.png',
    name: '男女同款情侣抗菌夜...',
    price: '￥149.00'
  },
  {
    img: 'https://yanxuan-item.nosdn.127.net/690e5cb552428321311e6ee03a4b12ed.png',
    name: '青春系列茶水分离杯...',
    price: '￥75.00'
  }
]


// 代码
// 第一页
const tmpArr = obj.map(item => {
  return ` <div class="car-o">
              <a href="javascript:;">
                 <img src="${item.img}"alt="">
                 <p class="name">${item.name}</p>
                 <p class="price">${item.price}</p>
              </a>
            </div>`
})
const tmpStr = tmpArr.join('')
document.querySelector('.carou-first').innerHTML = tmpStr
// 第二页
const tmpArr1 = obj1.map(item => {
  return ` <div class="car-o">
              <a href="javascript:;">
                 <img src="${item.img}"alt="">
                 <p class="name">${item.name}</p>
                 <p class="price">${item.price}</p>
              </a>
            </div>`
})
const tmpStr1 = tmpArr1.join('')
document.querySelector('.carou-two').innerHTML = tmpStr1
// 第三页
const tmpArr2 = obj2.map(item => {
  return ` <div class="car-o">
              <a href="javascript:;">
                 <img src="${item.img}"alt="">
                 <p class="name">${item.name}</p>
                 <p class="price">${item.price}</p>
              </a>
            </div>`
})
const tmpStr2 = tmpArr2.join('')
document.querySelector('.carou-three').innerHTML = tmpStr2
// 第四页
const tmpArr3 = obj3.map(item => {
  return ` <div class="car-o">
              <a href="javascript:;">
                 <img src="${item.img}"alt="">
                 <p class="name">${item.name}</p>
                 <p class="price">${item.price}</p>
              </a>
            </div>`
})
const tmpStr3 = tmpArr3.join('')
document.querySelector('.carou-four').innerHTML = tmpStr3